<template>
    <view class="commonList ovfxh">
        <u-sticky :enable="isShowSearch">
            <view class="searchInputStyle">
                <u-button type="primary" v-if="$gx.HasPermission(40202)" @click="addBtn()" class="addBtn">
                    <u-icon labelPos="bottom" class="codeIcon" name="plus" color="#fff" size="24"></u-icon>
                </u-button>
                <u-search v-model="filterData._NewCode" placeholder="新绳编码" :clearabled="true" :show-action="false" shape="square" @search="searchData" @clear="searchData"></u-search>
                <u-icon labelPos="bottom" @click="codeSearch(2)" class="codeIcon" name="scan" color="#BFBFBF" size="48"></u-icon>
            </view>
        </u-sticky>
        <view class="cons-ul">
            <touchView ref="touchViews" v-for="item in list" :key="item.autoID" @clearTouch="clearTouch">
                <view class="cons-li posr">
                    <view class="title topTitle">
                        <text class="label-name">换绳编码：{{ item.code || "-" }}</text>
                    </view>
                    <u-line class="marb-20" color="#E5E5E5"></u-line>
                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">旧绳编码：</text>
                            <text>{{ item.oldCode }}</text>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">旧绳名称：</text>
                            <text>{{ item.oldName || "" }}</text>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">新绳编码：</text>
                            <text>{{ item.newCode || "" }}</text>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="marb-30">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">新绳名称：</text>
                            <text>{{ item.newName }}</text>
                        </u-col>
                    </u-row>
                    <u-row gutter="0" class="marb-30">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">安装日期：</text>
                            <text>{{ item.installDate | ymd }}</text>
                        </u-col>
                    </u-row>
                    <u-row gutter="0" class="marb-30">
                        <u-col span="12" class="uni-commit">
                            <text class="label-name">换绳原因：</text>
                            <text>{{ item.reason }}</text>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="btnBox mart-20 marb-10">
                        <template>
                            <u-col span="3">
                                <u-button type="warning" size="small" @click="showDetailDialog(item, '详情')">详情</u-button>
                            </u-col>
                        </template>
                    </u-row>
                </view>
            </touchView>
        </view>

        <searchPopup ref="searchPopup" @AdvanceSearch="searchData" @ClearSearch="clearSearch">
            <u--form :model="filterData" ref="searchForm" label-position="top" :labelWidth="120">
                <u-form-item label="新绳名称">
                    <u--input v-model="filterData._NewName" placeholder="请输入新绳名称码" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item label="旧绳编码">
                    <u--input v-model="filterData._OldCode" placeholder="请输入旧绳编码" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>

                <u-form-item label="旧绳名称">
                    <u--input v-model="filterData._OldName" placeholder="请输入旧绳名称" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
				
				<u-form-item label="矿山">
				    <ld-select class="ldSel w-100" :multiple="true" label-key="name" value-key="autoID" table="Department" action="GetSearchWithIsDelete" :filter="{ _Type: $enums.Department_Type.矿山 }" label="name" value="autoID" placeholder="请选择矿山" clearable v-model="filterData._OldDepartmentIDs" @change="statusChange"></ld-select>
				</u-form-item>
            </u--form>
        </searchPopup>

        <view class="hei-30"></view>
    </view>
</template>

<script>
import ldSelect from "@/components/ld-select/ld-select.vue";
export default {
    components: {
        ldSelect,
    },
    data() {
        return {
            //查询分页所需要的数据
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            orderBy: "[ChangeWirerope].[ChangeWireropeID] DESC",

            //搜索条件对象
            filterData: {
                _OldName: "",
                _OldDepartmentIDs: [],
                // _HoisterIDs: [],
            },
            list: [], //列表数据

            hasMore: true, //是否可以加载更多
            isShowSearch: true, //是否显示顶部搜索框，这里不是为了控制显示不显示，而是要处理在离开本页时把这个隐藏，否则会报错

            calendarShow: false,
            CompleteDate: "",
            baoGongPer: [],

            AssignStatusList: [],
            ajaxData: {},
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("reportInit", function (data) {
            that.filterData._SearchInput = data.code;
        });
        eventChannel.on("liaoKuangSave", function (data) {
            that.filterData = data.data;
            setTimeout(() => {
                that.GetPage(true);
            }, 2000);
        });
    },
    //生命周期-显示
    onReady() {
        // this.initSelect();
        this.isShowSearch = true;
        this.GetPage();
        // this.baoGongPer = this.$gx.permissionRole(20000)[1].children;
        // this.AssignStatusList = (this.$enums.Assign_Status1.ToArray()).filter((item) => {
        // 	return item.value != 0
        // })
    },

    //生命周期-隐藏
    onHide() {
        this.isShowSearch = false;
    },

    onShow() {
        uni.$off("refreshData");
        uni.$on("refreshData", (res) => {
            this.RefreshData();
        });
    },

    //生命周期-下拉刷新
    onPullDownRefresh() {
        this.RefreshData();
    },

    //生命周期-上拉加载更多
    onReachBottom() {
        if (this.hasMore) {
            this.pageIndex++;
            this.GetPage();
        }
    },

    onNavigationBarButtonTap(e) {
        if (e.text == "筛选") {
            this.show = false;
            this.$nextTick(() => {
                this.$refs.searchPopup.init();
            });
        }
    },

    methods: {
        addBtn() {
            this.showDetailDialog({}, "新增");
        },
        statusChange(val) {
            this.$set(this.filterData, "_OldDepartmentIDs", val);
        },
       
        //扫码
        codeSearch(type) {
            uni.scanCode({
                onlyFromCamera: true,
                scanType: ["qrCode"],
                success: (res) => {
                    if (!this.$gx.IsEmpty(res.result)) {
                        let code = res.result;
                        console.log(code);
                        this.filterData._NewCode = code;
                        this.searchData();
                    } else {
                        this.$app.Tips({
                            title: "扫码信息格式不正确！",
                        });
                    }
                },
                fail: () => {
                    // this.$app.Tips({ title: "扫码失败，请联系管理员！" });
                },
                complete: () => {},
            });
        },
        // 回退所有的touchView
        clearTouch() {
            this.$refs.touchViews.forEach((element) => {
                element.hide();
            });
        },
        //分页
        GetPage(clearFlag) {
            const own = this;
            this.$app.ShowLoading();
            if (clearFlag) this.list = [];
            this.$app.CallApi(this.$app.api.ChangeWirerope.GetPage(this.pageIndex, this.pageSize, this.orderBy), {
                data: this.filterData,
                success: (res) => {
                    this.totalCount = res.totalCount;
                    this.list = this.list.concat(res.items);
                    this.$app.HideLoading();
                    if (this.totalCount <= this.list.length) {
                        this.hasMore = false;
                    }
                },
            });
        },

        searchData() {
            this.RefreshData();
        },

        //搜索
        RefreshData() {
            this.pageIndex = 1;
            this.list = [];
            this.hasMore = true;
            this.GetPage();
        },

        showDetailDialog(row, operateType) {
            let url = "/pages/ropeManagement/detail";
            // if(operateType=='详情')url='/pages/ropeManagement/infoDetail';
            uni.navigateTo({
                url: url,
                success: function (res) {
                    res.eventChannel.emit("editData", {
                        data: row,
                        operateType: operateType,
                    });
                },
            });
        },

        clearSearch() {
            this.filterData._OldName = "";
            this.filterData._OldCode = "";
            this.filterData._NewName = "";
            this.filterData._NewCode = "";
            this.searchData();
        },
        initSelect() {
            this.$app.CallApi(this.$app.api.SupportInfo.GetSearch(), {
                success: (res) => {
                    this.ajaxData.supportInfoList = res;
                },
            });
        },
    },
};
</script>

<style scoped>
.commonList .cons-li {
    background-color: white;
}

.noPadding {
    padding: 0px !important;
}

.btnBox {
    justify-content: center !important;
    column-gap: 20rpx;
}

.btnBox .u-btn {
    min-width: 130rpx;
    height: 70rpx;
}

.searchInputStyle {
    display: flex;
    align-items: center;
}

.topTitle {
    display: flex;
}

.topTitle .label-name {
    flex: 2;
}
</style>
